<template>
    <div class="allContaactInfoItem">
        <el-dialog
            v-drag
            v-if="showDialogFrom"
            :title="isTitleValue"
            :visible.sync="showDialogFrom"
            width="520px"
            :append-to-body="true"
            top="20vh"
            class="allContaactInfoItem"
            :close-on-click-modal="false"
            center
        >
            <el-form :model="ContactsQueryInfo" :rules="rules" ref="ruleForm" label-width="155px">
                <el-row>
                    <el-col :span="22" :offset="2">
                        <div class="text_center width30">
                            <el-form-item label="联系人姓名:" class="text_fl" prop="NAME">
                                <el-input
                                    :disabled="!isAddInfo"
                                    v-model.trim="ContactsQueryInfo.NAME"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="22" :offset="2">
                        <div class="text_center width30">
                            <el-form-item label="联系人手机:" class="text_fl" prop="MOBILE">
                                <el-input
                                    v-model.trim="ContactsQueryInfo.MOBILE"
                                    :disabled="disabledValue"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="22" :offset="2">
                        <div class="text_center width30">
                            <el-form-item label="联系人与申请人关系:" class="text_fl" prop="REL">
                                <el-select
                                    :disabled="disabledValue"
                                    v-model.trim="ContactsQueryInfo.REL"
                                    placeholder="请选择联系人与申请人关系"
                                    clearable
                                    @change="changerel"
                                >
                                    <el-option
                                        v-for="item in RELO1Option"
                                        :label="item.label"
                                        :value="item.code"
                                        :key="item.id"
                                    ></el-option>
                                </el-select>
                                <!-- <span
                                    v-else
                                    class="el-form-item-span"
                                >{{ContactsQueryInfo.REL|filterRel01(RELO1Option)}}</span>-->
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="22" :offset="2">
                        <div class="text_center width30">
                            <el-form-item label="联系人是否直系亲属:" class="text_fl" prop="RELFLAG">
                                <el-select
                                    disabled
                                    v-model="ContactsQueryInfo.RELFLAG"
                                    placeholder="请选择联系人是否直系亲属"
                                    clearable
                                >
                                    <el-option label="是" value="1"></el-option>
                                    <el-option label="否" value="0"></el-option>
                                </el-select>
                                <!-- <span
                                    v-else
                                    class="el-form-item-span"
                                >{{ContactsQueryInfo.RELFLAG|filterRelflag}}</span>-->
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button @click="formSucces">取 消</el-button> -->
                <el-button
                    v-if="!disabledValue"
                    v-show="!isAddInfo"
                    type="primary"
                    size="small"
                    @click="UpdataContaactInfo('ruleForm')"
                >修 改</el-button>
                <el-button
                    v-if="!disabledValue && isAddInfo"
                    type="primary"
                    size="small"
                    @click="addContaactInfo('ruleForm')"
                >添加联系人</el-button>
                <el-button
                    v-if="disabledValue"
                    type="primary"
                    @click="formSucces"
                    size="small"
                    icon="el-icon-circle-check"
                    v-preventReClick
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { closePage } from '@/utils/Common';

export default {
    name: 'AllContaactInfoItem',
    props: {
        ContactsQueryInfo: {
            type: Object,
        },
        RELO1Option: {
            type: Array,
        },
        disabledValue: {
            type: Boolean,
        },
        isAddInfo: {
            type: Boolean,
        },
    },
    data() {
        const valitateRelflag = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('联系人是否直系亲属选项必填!'));
            } else if (value === '1' && !(this.ContactsQueryInfo.REL === 'D' || this.ContactsQueryInfo.REL === 'F' || this.ContactsQueryInfo.REL === 'E')) {
                callback(new Error('如果是直系亲属,联系人与申请人关系必须是父母、子女或者夫妻！'));
            } else {
                callback();
            }
        };

        return {
            showDialogFrom: false,
            defaultParams: this.$store.getters.defaultParams || '', // 更新报文
            addContactsQuery: {}, // 添加信息成功 返回
            // formRules: false, //必填校验添加
            // filterRel01:'',//联系人与申请人关系
            rules: {
                NAME: [
                    { required: true, message: '联系人姓名选项必填!', trigger: 'blur' },
                    { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
                REL: [
                    {
                        required: true,
                        message: '联系人与申请人关系必填!',
                        trigger: 'blur',
                    },
                ],
                RELFLAG: [
                    {
                        required: true,
                        validator: valitateRelflag,
                        trigger: 'blur',
                    },
                ],
                MOBILE: [
                    {
                        required: true,
                        message: '联系人手机号必填!',
                        trigger: 'blur',
                    },
                ],
            },
        };
    },
    filters: {
        filterRel01: (value, RELO1Option) => {
            value = (`${value}`).trim();
            for (let index = 0; index < RELO1Option.length; index++) {
                const element = RELO1Option[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
        filterRelflag: (value) => {
            value = (`${value}`).trim();
            if (value === '1') {
                return '是';
            }
            return '否';
        },
    },

    computed: {
        ...mapGetters(['cardInfo_3004', 'pinFlag']),
        isTitleValue() {
            if (this.isAddInfo) {
                return '新增联系人信息';
            } if (!this.disabledValue) {
                return '修改联系人信息';
            }
            return '查看联系人信息';
        },
    },
    methods: {
        formSucces() {
            this.showDialogFrom = false;
        },
        //  修修改联系人信息
        UpdataContaactInfo(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.getContactsQueryInfo('2');
                    this.showDialogFrom = false;
                } else {
                    // this.$alert('必填项不能为空','提示',{
                    //     customClass:'warning'
                    // })
                }
            });
        },

        changerel(val) {
            console.log("val", val);
            if (val === 'D' || val === 'E' || val === 'F') {
                this.ContactsQueryInfo.RELFLAG = '1';
            } else {
                this.ContactsQueryInfo.RELFLAG = '0';
            }

        },
        //
        addContaactInfo(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.getContactsQueryInfo('1');
                    this.showDialogFrom = false;
                } else {
                    this.$alert('必填项不能为空', '提示', {
                        customClass: 'warning', type: 'warning',
                    });
                }
            });
        },
        // 4081联系人信息维护和查询
        getContactsQueryInfo(values) {
            const defaultParaminfo = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParaminfo.body.appHead.tranCode = '4081'; // 修改交易号
            defaultParaminfo.body.appBody.PINFLAG = this.pinFlag;
            defaultParaminfo.body.appBody.PIN = '';
            defaultParaminfo.body.appBody.OPTION = values; // 操作选项 修改
            defaultParaminfo.body.appBody.NAME = this.ContactsQueryInfo.NAME; // 姓名
            defaultParaminfo.body.appBody.CUSTID = this.ContactsQueryInfo.CUSTID; // 证件号码，
            defaultParaminfo.body.appBody.KEYTYPE = this.ContactsQueryInfo.KEYTYPE; // 证件类型
            defaultParaminfo.body.appBody.CUSTRNBR = this.ContactsQueryInfo.CUSTRNBR; // 联系人证件号码
            defaultParaminfo.body.appBody.CONCOMP = this.ContactsQueryInfo.CONCOMP; // 联系人单位
            defaultParaminfo.body.appBody.AREA = this.ContactsQueryInfo.AREA; // 联系人电话区号
            defaultParaminfo.body.appBody.TEL = this.ContactsQueryInfo.TEL; // 联系人电话
            defaultParaminfo.body.appBody.EXT = this.ContactsQueryInfo.EXT; // 联系人电话分机
            defaultParaminfo.body.appBody.MOBILE = this.ContactsQueryInfo.MOBILE; // 联系人手机
            defaultParaminfo.body.appBody.REL = this.ContactsQueryInfo.REL; // 联系人与申请人关系
            defaultParaminfo.body.appBody.RELFLAG = this.ContactsQueryInfo.RELFLAG; // 联系人是否直系亲属

            this.$post.common.transPort(defaultParaminfo).then((res) => {
                console.log(res);
                const tabledatas = JSON.parse(res.data.jsonRes);
                if (res.status === 200) {
                    // 请求成功
                    console.log(tabledatas, '4081');
                    if (tabledatas.sysHead.rspCd == '000000') {
                        // 交易成功
                        this.addContactsQuery = tabledatas.body.appBody;

                        this.$emit('childHanderAllContaactInfoItem', true);
                        this.showDialogFrom = false;
                    } else {
                        const ErrorMessage = `错误码：${tabledatas.sysHead.rspCd} ` + `错误信息：${tabledatas.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, tabledatas.sysHead.busiName, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                }
            });
        },
    },
};
</script>

<style lang='scss'>
.allContaactInfoItem {
    .el-form-item__content {
        text-align: left;
    }
}
</style>
